<script setup>
import { ref } from 'vue'
let showAll = ref(true)
import { onLoad } from '@dcloudio/uni-app'
import { getEventInfoByIdAPI } from '@/services/attraction'
const parmas = ref({
  id: '',
  type: '',
})
const info = ref({})
const bannerData = ref([])
const descHeight = ref(0)
const onClickFunc = () => {
  showAll.value = !showAll.value
}
const goBack = () => {
  uni.navigateBack()
}
// 页面加载
onLoad((e) => {
  console.log(e)
  if (e) {
    const { id, type } = e
    parmas.value.id = id
    parmas.value.type = type
  }
  getData()
  setTimeout(async () => {
    let rect = await GetRect('.attractions-desc')
    descHeight.value = rect.height
    showAll.value = rect.height < 220
  }, 1000)
})
const onChange = () => {}
//获取节点信息
const GetRect = (selector) => {
  return new Promise((resolve, reject) => {
    let view = uni.createSelectorQuery().in(this)
    view
      .select(selector)
      .boundingClientRect((rect) => {
        resolve(rect)
      })
      .exec()
  })
}
const getData = async () => {
  const res = await getEventInfoByIdAPI(parmas.value)
  const { code, data, msg } = res
  if (code == 200) {
    console.log(data)
    info.value = data
    bannerData.value = data.url ? data.url.split('|') : []
  }
}
// 预览图片
const onPreviewImage = () => {
  uni.previewImage({
    urls: bannerData.value,
    longPressActions: {
      itemList: ['发送给朋友', '保存图片', '收藏'],
      success: function (data) {
        console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片')
      },
      fail: function (err) {
        console.log(err.errMsg)
      },
    },
  })
}
</script>

<template>
  <view class="viewport">
    <view class="head">
      <swiper class="swiper" :circular="true" :autoplay="true" :interval="8000" @change="onChange">
        <swiper-item v-for="(item, index) in bannerData" :key="index">
          <image class="pic" mode="aspectFill" :src="item" @click="onPreviewImage"></image>
        </swiper-item>
      </swiper>
      <view class="fixed-box">
        <image
          @click="goBack"
          class="fixed-back-icon"
          src="/static/images/fanhui@2x.png"
          mode="aspectFill"
        ></image>
        <view class="fixed-box-right">
          <image class="fixed-like-icon" src="/static/images/wsc@2x.png" mode="aspectFill"></image>
          <image
            class="fixed-share-icon"
            src="/static/images/fenxiang@2x.png"
            mode="aspectFill"
          ></image>
        </view>
      </view>
      <view class="fixed-album">
        <image src="/static/images/xiangce@2x.png" mode="aspectFill" class="album-icon"></image>
        <view>Album</view>
      </view>
    </view>
    <view class="title">{{ info.name }}</view>
    <!-- <view class="time-box">
      <view class="time-left">
        <image src="/static/images/shijian@2x.png" mode="aspectFill" class="time-icon"></image>
        <view>Opening hours: 09:00-22:00</view>
      </view>
      <image class="arrow-icon" src="/static/images/jinru@2x.png" mode="aspectFill"></image>
    </view> -->
    <view class="map-box">
      <image
        class="map-pic"
        src="/static/images/e46624588893f436591ee1bb82a1da34.png"
        mode="aspectFill"
      ></image>
      <view class="map-desc">
        <image class="map-desc-icon" src="/static/images/ditu@2x.png" mode="aspectFill"></image>
        <view class="desc">{{ info.provinceName }}{{ info.cityName }}{{ info.name }}</view>
        <image src="/static/images/chakan@2x.png" mode="aspectFill" class="look-icon"></image>
      </view>
    </view>
    <view class="attractions-box">
      <view class="attractions-title">Attractions</view>
      <view class="attractions-desc" :class="showAll ? '' : 'hidden-box'">
        {{ info.description }}
      </view>
      <image
        src="/static/images/jianbian@2x.png"
        mode="aspectFill"
        class="mask-pic"
        v-if="descHeight > 220 && !showAll"
      >
      </image>
    </view>
    <view class="more" @click="onClickFunc" v-if="descHeight > 220">
      <view>{{ showAll ? 'Collapse' : 'View all' }}</view>
      <image
        class="tri"
        :class="showAll ? 'rotate' : ''"
        src="/static/images/xia@2x.png"
        mode="aspectFill"
      ></image>
    </view>
  </view>
</template>

<style lang="scss" scoped>
page {
  background-color: #fff;
}

.viewport {
  padding-bottom: 80rpx;
  overflow-x: hidden;
  overflow-y: auto;

  .head {
    position: relative;

    .swiper {
      width: 100%;
      height: 745rpx;
    }

    .pic,
    .navigator {
      width: 100%;
      height: 100%;
    }

    .fixed-box {
      position: absolute;
      top: 30rpx;
      left: 0;
      z-index: 10;
      padding: 36rpx;
      width: 100%;
      display: flex;
      align-items: center;

      .fixed-back-icon,
      .fixed-like-icon,
      .fixed-share-icon {
        width: 68rpx;
        height: 68rpx;
      }

      &-right {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .fixed-like-icon {
          margin-right: 18rpx;
        }
      }
    }

    .fixed-album {
      position: absolute;
      right: 36rpx;
      bottom: 36rpx;
      display: flex;
      align-items: center;
      padding: 12rpx 25rpx;
      background: rgba(0, 0, 0, 0.33);
      border-radius: 30rpx;
      backdrop-filter: blur(10px);
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 24rpx;
      color: #ffffff;
      line-height: 33rpx;

      .album-icon {
        width: 35rpx;
        height: 35rpx;
        margin-right: 4rpx;
      }
    }
  }

  .title {
    font-family: HarmonyOS_Sans_SC_Bold;
    font-size: 44rpx;
    color: #000000;
    line-height: 62rpx;
    padding: 30rpx 36rpx;
  }

  .time-box {
    padding: 0 36rpx;
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 27rpx;

    .time-left {
      flex: auto;
      display: flex;
      align-items: center;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 24rpx;
      color: #000000;
      line-height: 33rpx;

      .time-icon {
        width: 30rpx;
        height: 30rpx;
        margin-right: 15rpx;
      }
    }

    .arrow-icon {
      flex: 0 0 24rpx;
      width: 24rpx;
      height: 24rpx;
    }
  }

  .map-box {
    width: 90.4%;
    height: auto;
    margin: 0 auto;
    position: relative;
    border-radius: 18rpx;

    .map-pic {
      width: 100%;
      height: 400rpx;
      border-radius: 18rpx;
    }

    .map-desc {
      padding: 20rpx 30rpx 15rpx;
      display: flex;
      align-items: center;
      background: rgba(0, 0, 0, 0.4);
      border-radius: 0rpx 0rpx 18rpx 18rpx;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;

      .map-desc-icon {
        flex: 0 0 53rpx;
        width: 53rpx;
        height: 53rpx;
        margin-right: 23rpx;
      }

      .desc {
        flex: auto;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #ffffff;
        line-height: 33rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }

      .look-icon {
        flex: 0 0 30rpx;
        height: 30rpx;
      }
    }
  }

  .attractions-box {
    width: 90.4%;
    height: auto;
    margin: 54rpx auto 0;
    position: relative;

    .attractions-title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 34rpx;
      color: #000000;
      line-height: 48rpx;
      margin-bottom: 25rpx;
    }

    .attractions-desc {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #242629;
      line-height: 40rpx;

      &.hidden-box {
        max-height: 440rpx;
        overflow: hidden;
      }
    }

    .mask-pic {
      width: 100%;
      height: 196rpx;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 5;
    }
  }

  .more {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 24rpx;
    color: #625ff1;
    line-height: 33rpx;
    margin-top: 14rpx;

    .tri {
      width: 30rpx;
      height: 30rpx;
      margin-left: 4rpx;

      &.rotate {
        transform: scaleY(-1);
      }
    }
  }
}
</style>
